<template>
	<view>
		<view style="margin: 5px 0;">
			<u-search placeholder="查找好友" v-model="keyWord" @custom='searchUser'></u-search>
		</view>
		<view  class="list-cell u-border-bottom" >
			<navigator url="/pages/new-buddy/index" style="width: 100%;">
				好友请求
			</navigator>
		</view >
		<u-index-list :scrollTop="scrollTop" :index-list="indexList" :sticky='false'>
			
			<view v-for="(item, index) in userInfoList" :key="index">
				<u-index-anchor :index="item.letter" />
				<view class="list-cell u-border-bottom" v-for="(item1, index1) in item.data" :key="index1"  @tap='to(item1.id)'>
						<u-avatar :src="item1.figureurl"></u-avatar>
						{{item1.nickname}}
				</view>
			</view>
		</u-index-list>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<tab-bar />
	</view>
	
</template>

<script>
import ContactMixin from '@/common/mixins/chat_contact.js'
import ChatBase from '@/common/mixins/chat_base.js'
export default {
	mixins:[ChatBase,ContactMixin],
	data() {
		return {
			keyWord:'',
			scrollTop: 0,
		};
	},
	computed: {
		userInfoList(){
			const match = d => d.nickname.includes(this.keyWord);
			return this.$store.getters['chat/userInfoList']
				.filter(e => e.data && e.data.find(match))
				.map(e => {
					e.data = e.data.filter(match);
					return e;
				});
		},
		indexList(){
			return this.userInfoList.map(item=>{
				return item.letter
			})
		}
	},

	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	
	created() {
		
	},

	mounted() {
			},

	methods: {
		searchUser(value){
			uni.navigateTo({
				url:'/pages/search/index?serch='+value
			})
		},
		to(id){
			uni.navigateTo({
				url:'/pages/chat/index?id='+id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	height:calc( 100% - 50px);
}
.contact{
	margin-top: 20upx;
}
.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
